<template>
  <el-card shadow="hover">
    <div>
      <el-form inline :form="form">
        <el-form-item>
          <el-select v-model="form.searchArea">
            <el-option v-for="item in areaList(1)" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="form.searchArea">
            <el-option :value="1" :label="'高等教育'" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="form.searchArea">
            <el-option :value="1" :label="'B2B'" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="form.searchArea">
            <el-option :value="1" :label="'2018-2019学年'" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="form.searchArea">
            <el-option :value="1" :label="'上学期'" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.searchSchoolName" type="text" placeholder="请输入学校名称" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.searchMajorName" type="text" placeholder="请输入专业名称" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="form.searchCourseName" type="text" placeholder="请输课程名称" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
      </el-form>

      <el-divider />

      <el-table border :data="tableData">
        <el-table-column prop="area" label="省份" />
        <el-table-column prop="schoolName" label="学校名" />
        <el-table-column prop="schoolType" label="教材管理模式" />
        <el-table-column prop="teacher_sum" label="教师人数" sortable>
          <template slot-scope="scoped">
            <el-button type="text">{{ scoped.row.teacher_sum }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="faculty_sum" label="学院数" sortable>
          <template slot-scope="scoped">
            <el-button type="text">{{ scoped.row.faculty_sum }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="major_sum" label="专业数" sortable>
          <template slot-scope="scoped">
            <el-button type="text">{{ scoped.row.major_sum }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="course_sum" label="课程数" sortable>
          <template slot-scope="scoped">
            <el-button type="text">{{ scoped.row.course_sum }}</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="book_type" label="教材规模" sortable />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-view" @click="goToDetail(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script>

import { mapGetters } from 'vuex'
export default {
  name: 'SchoolDataTable',
  data() {
    return {
      form: {
        searchArea: '',
        searchSchoolName: '',
        searchMajorName: '',
        searchCourseName: ''
      },
      tableData: [
        { area: '山西', schoolName: '山西农业大学', schoolType: 'B2B2C', teacher_sum: '1408', faculty_sum: '15', major_sum: '245', course_sum: '1998', book_type: '35560' }
      ]
    }
  },
  computed: {
    ...mapGetters({
      areaList: 'd2admin/area/getArea'
    })
  },
  methods: {
    // 跳转至详情页面
    // eslint-disable-next-line no-unused-vars
    goToDetail(rowData) {
      this.$router.push('/marketing/adviser/schoolcae/detail')
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
